<template>
  <div class="login_container">
    <div class="login_box">
      <!--添加表单-->
      <div class="avatar_box">
        <!--头像-->
        <img src="../assets/logo.png" alt />
      </div>

      <!-- 内容主体区域 -->
      <h3 class="title">用户注册</h3>
      <el-form :model="addForm" :rules="addFormRules"
               ref="addFormRef" label-width="70px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="ad_username">
          <el-input v-model="addForm.ad_username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="ad_password">
          <el-input v-model="addForm.ad_password"></el-input>
        </el-form-item>
        <!-- 电话 -->
        <el-form-item label="电话" prop="ad_tel">
          <el-input v-model="addForm.ad_tel"></el-input>
        </el-form-item>
        <!-- 电话 -->
        <el-form-item label="姓名" prop="ad_real_name">
          <el-input v-model="addForm.ad_real_name"></el-input>
        </el-form-item>

        <!-- 类型 -->
        <el-form-item label="注册类型" prop="ad_type">
          <el-select v-model="addForm.ad_type">
            <el-option value="3">经销商</el-option>
            <el-option value="2">云工厂管理员</el-option>
          </el-select>
        </el-form-item>

        <!-- 工厂名称 -->
        <el-form-item label="工厂名称" prop="fa_name">
          <el-input v-model="addForm.fa_name"></el-input>
        </el-form-item>

        <!-- 工厂名称 -->
        <el-form-item label="工厂介绍" prop="fa_desc">
          <el-input v-model="addForm.fa_desc"></el-input>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" @click="backward">登录</el-button>
          <el-button type="info" @click="register">注册</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 添加用户表单项
      addForm: {
        ad_username:'',
        ad_password:'',
        ad_tel:'',
        ad_real_name:'',
        ad_type:'',
        ad_day:'',
        fa_name:'',
        fa_desc:'',
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 8, message: "密码为 6~8 位", trigger: "blur" }
        ]
      },
      addFromRules:{

      },
    };
  },
  methods: {
    resetLoginForm() {
      this.$refs.addFormRef.resetFields();
    },
    register() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return;
        // 调用get请求
        const {data :res} = await this.$http.post("admin/register", this.addForm);
        if (res === "success" ) {
          this.$message.success("注册成功");
        }else{
          this.$message.error("注册失败！！！");
        }
      });
    },
    addDialogClosed(){
      this.$refs.addFormRef.resetFields();// 重置表单项
    },
    backward(){
      this.$router.push("/login");
    }
  }
};
</script>

<style lang="less" scoped>

// 跟节点样式
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
// 登录框
.login_box {
  width: 600px;
  height: 550px;
  background-color: #fff;
  border-radius: 3px;// 圆角
  position: absolute;// 绝对定位
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);// 根据自己位置 以自己为长度位移
  // 头像框
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%; // 加圆角
    padding: 10px;
    box-shadow: 0 0 10px #ddd;// 盒子阴影
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #0ee;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%; // 加圆角
      background-color: #eee;
    }
  }
  .btns {
    display: flex;// 弹性布局
    justify-content: flex-end; // 尾部对齐
  }
  .login_form {
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;// 设置边框
  }
  .title{
    align-content: center;
  }
}
</style>